<template>
  <div class="searchHistory">
    <div class="searchHistoryTop">
        <div>历史</div>
        <div @click="bin"><span class="icon-bin"></span></div>
    </div>
    <div class="searchHistoryVaule">
        <span v-for="(item,index) in historyArr" :key="index" @click="getSearchRes(item)">{{item}}</span>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations, mapActions} from 'vuex'
export default {
    name: "SearchHistory",
    data() {
        return {
            historyArr: []
        }
    },
    methods: {
        ...mapActions(['getSearchRes']),
        ...mapMutations(['getSearchList']),
        bin() {
            localStorage.removeItem('historyArr');
            this.historyArr=[];
        }
    },
    beforeCreate() {
        this.bus.$on("search_click", msg => {
            let i=this.historyArr.indexOf(msg);
            if(i!=-1) this.historyArr.splice(i,1);
            this.historyArr.unshift(msg);
            //this.history=[...new Set(this.history)]
            if(this.historyArr.length==10)  this.historyArr.pop();
            localStorage.setItem('historyArr',JSON.stringify(this.historyArr));
        });
    },
    mounted() {
        this.historyArr=JSON.parse(localStorage.getItem('historyArr'));
    }
}
</script>

<style scoped>
.searchHistory {
    padding: .2rem;
}
.searchHistoryTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.searchHistoryTop div:nth-child(1) {
    font-weight: 700;
    font-size: .4rem;
}
.searchHistoryVaule {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: .2rem;
}
.searchHistoryVaule span{
    padding: .1rem .2rem;
    border: 1px solid #ccc;
    margin: .1rem .2rem;
    border-radius: .7rem;
}
</style>